<template>
    <div class="dialog">
        <div class="background" @click="giveUp()"></div>
        <div class="dialogdiv commentdiv">
            <label>评论查询</label>
            <img class="close" src="../../../assets/img/close.png" @click="giveUp()">
            <div class="message">
                <span
                    v-for="(text,index) in comments" 
                    :key="index">
                    <div class="comment text">
                        <div class="textarea">
                            <span>
                                {{text.context}}
                            </span>
                        </div>
                        <div class="button">
                            <button class="yesbtn">通过</button>
                            <button class="deleteUser">删除</button>
                            <button class="zibtn">评论</button>
                        </div>
                    </div>
                </span>
                <!-- <DividePage :maxsize="3" :changePage="changePage" itemLength="15" :pagesizes="pagesizes"/> -->
            </div>
        </div>
    </div>
</template>

<script>
import DividePage from '../DividePage.vue'
import axios from 'axios'
export default {
    name: 'LookComments',
    components:{DividePage},
    data(){
        return{
            // pagesizes:[5],
            // page:1,
            comments:[],
        }
    },
    methods:{
        giveUp(){
            this.$store.state.dialog = 0
        },
        search(id){
            // 请求前更新list数据
            axios.get(`http://123.57.251.41:8080/praise/findComment?bodyId=${id}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('请求成功了')
                    console.log(response.data.data)
                    this.comments = response.data.data
                },
                error =>{
                    alert("请求失败了",console.log(error))
                }
            )
        },
    },
    computed:{
        Focuse(){
            return this.$store.state.dialog
        },
    },
    watch:{
        Focuse:{
            immediate:true,
            deep:true,
            //hander在isHot发生改变的时候调用
            handler(newValue,oldValue){
                console.log(newValue,oldValue)
                if(newValue == 5){
                    this.search(this.$store.state.bodyId)
                }
            }
        }
        // 'numbers.a':{    //监视多级结构中某个属性的变化
        //     handler(){
        //         console.log('a被改变了')
        //     }
        // }
    }
}
</script>

<style lang="less">
.commentdiv{
    max-height: 700px;
    overflow-y: auto !important;
}
.close{
    float: right;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.comment{
    height: 90px !important;
    border: 1px solid black;
    border-radius: 6px;
    .textarea{
        width: 400px;
        height: 90px;
        max-height: 100px !important;
        float: left;
        border-right: 1px solid black;
    }
    .button{
        width: 90px;
        // height: 100%;
        float: right;
        padding: 4px;
        text-align: center;
        vertical-align: middle;
        button{
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            border-color: #dcdfe6;
            color: #606266;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            font-weight: 400;
            padding: 5px 20px;
            font-size: 14px;
            border-radius: 4px;
            margin-bottom: 3px;
            // float: right;
        }
        button:hover{
            background: #46a6ff;
            border-color: #46a6ff;
            color: #fff;
        }
        .zibtn{
            color: #1890ff;
            background-color: #a3d3ff;
            border-color: #46a6ff;
            margin-right: 12px;
        }
        .yesbtn{
            color: #71e2a3;
            background-color: #e7faf0;
            border-color: #d0f5e0;
            margin-right: 12px;
        }
        .yesbtn:hover{
            color: #e7faf0;
            background-color: #71e2a3;
            border-color: #71e2a3;
        }
        .deleteUser{
            color: #ff9292;
            background-color: #ffeded;
            border-color: #ffdbdb;
            margin-right: 12px;
        }
        .deleteUser:hover{
            color: #ffeded;
            background-color: #ff9292;
            border-color: #ff9292;
        }
        .giveup{
            color: #ffba00;
            background: #fff8e6;
            border-color: #ffe399;
        }
        .giveup:hover{
            color: #fff8e6;
            background: #ffba00;
            border-color: #ffba00;
        }
    }
}
</style>